import { Stack, Typography, styled } from '@mui/material'
import { useAppSelector } from '../hooks'
import { selectCartProducts } from '../store/reducers/selectors'
import CartItem from '../components/cart/cartItem'
import CartSummary from '../components/cart/cartSummary'
import { GoBackButton } from '../components/shared/goBackButton'

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	marginBottom: '10px',
	width: '992px',
	justifyContent: 'flex-start',
	flexDirection: 'column',
}))

const StyledHeader = styled(Typography)(() => ({
	display: 'flex',
	styleName: 'Header : H1/ExtraBold',
	fontFamily: 'Nunito',
	fontSize: '28px',
	fontWeight: '800',
	lineGeight: '32px',
	letterSpacing: '0em',
	textAlign: 'left',
	marginBottom: '20px',
}))

const StyledCartlist = styled('div')(() => ({
	display: 'flex',
	flexDirection: 'column',
}))

const Cart = () => {
	const cartProducts = useAppSelector(selectCartProducts)

	return (
		<StyledContainer>
			<GoBackButton />
			<StyledHeader>
				{cartProducts
					? `Всего товаров в корзине: ${cartProducts.length}`
					: 'Корзина пуста'}
			</StyledHeader>
			<Stack direction={'row'}>
				<StyledCartlist>
					{cartProducts &&
						[...cartProducts]
							.sort((a, b) => a._id.localeCompare(b._id))
							.map(
								({
									_id,
									name,
									pictures,
									stock,
									price,
									discount,
									purchaseAmount,
								}) => (
									<CartItem
										key={_id}
										_id={_id}
										name={name}
										pictures={pictures}
										stock={stock}
										price={price}
										discount={discount}
										purchaseAmount={purchaseAmount}
									/>
								)
							)}
				</StyledCartlist>
				<CartSummary />
			</Stack>
		</StyledContainer>
	)
}

export default Cart
